import {Col, DatePicker, Divider, Form, Input, InputNumber, message, Modal, Row, Select, Tooltip} from 'antd';
import React, {useRef, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProductionWoForm from './components/ProductionWoForm';
import {proWorkOrder, queryOrder} from "@/services/order";
import {printMiTable} from "@/utils/printUtils";
import {queryProduct} from "@/services/product";
import moment from "moment";
import InfoCircleOutlined from "@ant-design/icons/lib/icons/InfoCircleOutlined";

const upperCaseLetter = [
  'A',
  'B',
  'C',
  'D',
  'E',
  'F',
  'G',
  'H',
  'I',
  'J',
  'K',
  'L',
  'M',
  'N',
  'O',
  'P',
  'Q',
  'R',
  'S',
  'T',
  'U',
  'V',
  'W',
  'X',
  'Y',
  'Z'
];
const TableList = () => {
  const [createModalVisible, handleModalVisible] = useState(false);
  const [printModalVisible, setPrintModalVisible] = useState(false);
  const [formType, setFormType] = useState(1) // 1:新增 2:更新 3：详情
  const [activekey, setActiveKey] = useState('tab1');
  const actionRef = useRef();
  const [formRef] = Form.useForm();
  const [row, setRow] = useState();
  const [selectedRow, setSelectedRow] = useState({});
  const [pnlSetNum, setPnlSetNum] = useState([])
  const [pnlSize, setPnlSize] = useState([])
  const [selectedProduct, setSelectedProduct] = useState({
    prdProductTechnologyProcesses: []
  });
  const {Option} = Select;
  const {RangePicker} = DatePicker;
  const handleApprovalModalVisible = (record) => {
    formRef.setFieldsValue({
      ...record
    })
    setSelectedRow(record)
    handleModalVisible(true)
    setFormType(2)
  }

  const handleDetailModalVisible = (record) => {
    formRef.setFieldsValue({
      ...record
    })
    setSelectedRow(record)
    handleModalVisible(true)
    setFormType(3)
  }

  const handlePrint = (record) => {
    queryProduct({
      pageSize: 1,
      pageNum: 1,
      productCode: record.productCode
    }).then(res => {
      if (res && res.status === '0') {
        setSelectedProduct(res.result.records[0])
        res.result.records[0].prdProductTechnologyProcesses.forEach(proc => {
          // 开料
          if (proc.processId === 6) {
            proc.prdProductMiValues.forEach(mi => {
              // PNL上SET数
              if (mi.miId === 154) {
                setPnlSetNum(mi.miValue.split(','))
              }
              // 平板尺寸
              if (mi.miId === 152) {
                setPnlSize(mi.miValue.split(','))
              }
            })
          }
        })
      } else {
        message.error(res.message)
      }
    })
    setPrintModalVisible(true)
    setSelectedRow(record)
  }

  const handlePrintOk = () => {
    printMiTable(document.getElementById('printTable').innerHTML)
    setPrintModalVisible(false)
  }

  const handleApproval = async (fields) => {
    //console.log((selectedRow)
    const orderData = {
      orderId: selectedRow.orderId,
      productCode: selectedRow.productCode,
      productionNo: selectedRow.productionNo,
      assignedNum: fields.productionNum
    }
    const hide = message.loading('正在审核');

    try {
      await proWorkOrder(orderData).then(res => {
        if (res && res.status === '0') {
          handleModalVisible(false)
          message.success('审核成功');
          if (actionRef.current) {
            actionRef.current.reload();
          }
        } else {
          message.error(res.message);
        }
      });
      hide();
      return true;
    } catch (error) {
      hide();
      message.error('审核失败请重试！');
      return false;
    }
  };


  const onSubmit = (orderDatas) => {
    const success = handleApproval(orderDatas);
    // if (success && actionRef.current) {
    //   actionRef.current.reload();
    // }
  }

  const getProcessExist = (processId) => {
    let isExist = false;
    for (let i = 0; i < selectedProduct.prdProductTechnologyProcesses.length; i++) {
      if (selectedProduct.prdProductTechnologyProcesses[i].processId === processId) {
        isExist = true;
        break;
      }
    }
    return isExist
  }

  const getMiValue = (processId, miId) => {
    let value = '';
    for (let i = 0; i < selectedProduct.prdProductTechnologyProcesses.length; i++) {
      if (selectedProduct.prdProductTechnologyProcesses[i].processId === processId) {
        for (let j = 0; j < selectedProduct.prdProductTechnologyProcesses[i].prdProductMiValues.length; j++) {
          if (selectedProduct.prdProductTechnologyProcesses[i].prdProductMiValues[j].miId === miId) {
            value = selectedProduct.prdProductTechnologyProcesses[i].prdProductMiValues[j].miValue ? selectedProduct.prdProductTechnologyProcesses[i].prdProductMiValues[j].miValue : '';
            break;
          }
        }
        break;
      }
    }
    return value
  }


  const noApprovalColumns = [
    {
      title: '序号',
      dataIndex: 'key',
      hideInForm: true,
      width: 80,
      hideInSearch: true,
      render: (text, record, index, action) => {
        return `${index + 1}`
      }
    },
    {
      title: '订单编号',
      dataIndex: 'orderCode',
      width: 150,
      tip: '订单编号是唯一的',
      hideInForm: true,
      copyable: true,
      renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
        return <Input placeholder={'请输入订单编号'}/>;
      }
    },
    // {
    //   title: '产品名称',
    //   dataIndex: 'productName',
    //   width: 150,
    //   formItemProps: {
    //     rules: [
    //       {
    //         max: 10,
    //         message: '产品名称最大长度为10'
    //       },
    //       {
    //         whitespace: true,
    //         message: '请不要输入空格'
    //       }
    //     ],
    //   },
    //   valueType: 'input',
    //   renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
    //     return <Input maxLength={11} {...fieldProps} placeholder={'请输入产品名称'}/>;
    //   }
    // },
    {
      title: '产品编码',
      dataIndex: 'productCode',
      width: 150,
    },
    {
      title: '生产编号',
      dataIndex: 'productionNo',
      width: 150,
      hideInSearch: true,
      renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
        return <Input maxLength={11} placeholder={'请输入生产编号'}/>;
      }
    },
    {
      title: '客户名称',
      dataIndex: 'custName',
      width: 150,
    },
    {
      title: '客户型号',
      dataIndex: 'clientCode',
      width: 150,
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '订货量(PCS)',
      width: 150,
      dataIndex: 'orderNum',
      hideInSearch: true
    },
    {
      title: '订单创建人',
      dataIndex: 'realName',
      width: 150,
      hideInSearch: true,
      hideInForm: true
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInSearch: true,
      width: 200,
      sorter: true,
      valueType: 'dateTime',
      hideInForm: true,
      renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
        return (
          <RangePicker showTime/>
        );
      }
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a onClick={() => handleDetailModalVisible(record)}>
          详情
        </a>,
        <Divider type="vertical"/>,
        <a onClick={() => handlePrint(record)}>
          打印
        </a>,
        <Divider type="vertical"/>,
        <a onClick={() => handleApprovalModalVisible(record)}>处理作业</a>,
      ],
    },
  ];

  const approvaledColumns = [
    {
      title: '序号',
      dataIndex: 'key',
      width: 80,
      hideInForm: true,
      hideInSearch: true,
      render: (text, record, index, action) => {
        return `${index + 1}`
      }
    },
    {
      title: '订单编号',
      dataIndex: 'orderCode',
      tip: '订单编号是唯一的',
      width: 150,
      hideInForm: true,
      copyable: true,
      renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
        return <Input placeholder={'请输入订单编号'}/>;
      }
    },
    // {
    //   title: '产品名称',
    //   dataIndex: 'productName',
    //   width: 150,
    //   formItemProps: {
    //     rules: [
    //       {
    //         max: 10,
    //         message: '产品名称最大长度为10'
    //       },
    //       {
    //         whitespace: true,
    //         message: '请不要输入空格'
    //       }
    //     ],
    //   },
    //   valueType: 'input',
    //   renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
    //     return <Input maxLength={11} {...fieldProps} placeholder={'请输入产品名称'}/>;
    //   }
    // },
    {
      title: '产品编码',
      dataIndex: 'productCode',
      width: 150,
    },
    {
      title: '客户名称',
      dataIndex: 'custName',
      width: 150,
    },
    {
      title: '客户型号',
      dataIndex: 'clientCode',
      hideInSearch: true,
      hideInTable: true,
      width: 150,
    },
    {
      title: '订货量(PCS)',
      dataIndex: 'orderNum',
      hideInSearch: true,
      width: 150,
    },
    {
      title: '订单创建人',
      dataIndex: 'realName',
      width: 150,
      hideInSearch: true,
      hideInForm: true
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      hideInForm: true,
      hideInSearch: true,
      width: 200,
      valueType: 'date',
      renderFormItem: (_, {type, defaultRender, formItemProps, fieldProps, ...rest}, form) => {
        return (
          <RangePicker showTime/>
        );
      }
    },
    {
      title: '审批人',
      dataIndex: 'approvalByName',
      hideInSearch: true,
      hideInForm: true,
      width: 150,
    },
    {
      title: '审批时间',
      dataIndex: 'approvalTime',
      hideInSearch: true,
      valueType: 'date',
      width: 200,
      hideInForm: true,
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a onClick={() => handleDetailModalVisible(record)}>
          详情
        </a>,
        <Divider type="vertical"/>,
        <a onClick={() => handlePrint(record)}>
          打印
        </a>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable
        style={{display: createModalVisible ? 'none' : 'block'}}
        actionRef={actionRef}
        rowKey="key"
        search={{
          labelWidth: 120,
        }}
        toolbar={{
          menu: {
            type: 'tab',
            activeKey: activekey,
            items: [
              {
                key: 'tab1',
                label: <span>待处理</span>,
              },
              {
                key: 'tab2',
                label: <span>已处理</span>,
              }
            ],
            onChange: (key) => {
              setActiveKey(key);
              if (actionRef.current) {
                actionRef.current.reload();
              }
            },
          },
        }}
        request={async (params, sorter, filter) => {
          const param = activekey === 'tab1' ? {
            ...params,
            pageNum: params.current,
            orderStatus: 8 // 查询生产计划中状态的订单
          } : {
            ...params,
            pageNum: params.current,
            orderStatusMin: 9 // 查询已完成生产计划的订单
          };
          const res = await queryOrder(param)
          return {
            data: res.result.records,
            success: true,
            total: res.result.total
          }
        }}
        columns={activekey === 'tab1' ? noApprovalColumns : approvaledColumns}
      />
      {
        createModalVisible ? <ProductionWoForm
          onCancel={() => handleModalVisible(false)}
          visible={createModalVisible}
          onSubmit={(orderData) => onSubmit(orderData)}
          formType={formType}
          oldOrderData={selectedRow}
        >
        </ProductionWoForm> : <></>
      }
      <Modal width={1000} wrapClassName={'printModal'} visible={printModalVisible} okText={'打印'}
             onOk={() => handlePrintOk()}
             onCancel={() => {
               setPrintModalVisible(false)
             }}>
        <div id={'printTable'}>
          <h1 style={{textAlign: 'center'}}>生产制作指示</h1>

          <table>
            <tr>
              <td colSpan="11" className="td-t td-l td-r">生产编号：{selectedRow.productionNo}</td>
              {/*<td colSpan="4" className="td-t td-l td-r">订单编号：{selectedRow.orderCode}</td>*/}
              {/*<td colSpan="3" className="td-t td-l td-r">物料号：{selectedRow.custMatNo}</td>*/}
              <td colSpan="5"
                  className="td-t td-l td-r">交货日期：{selectedRow.requirementDeliveryTime ? moment(selectedRow.requirementDeliveryTime, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD') : ''}</td>
            </tr>
            <tr>
              <td style={{width: '60px'}}>品名:</td>
              <td style={{width: '80px'}}>{selectedRow.custModelNo}</td>
              <td style={{width: '80px'}} colSpan={5} className="td-r">成品尺寸: {selectedProduct.panelLength} mm
                x {selectedProduct.panelWidth} mm
              </td>
              <td colSpan="1" className="td-r">拼版方式:</td>
              <td className="td-l td-r">A:1 x {selectedProduct.panelPcbNum}</td>
              <td className="td-l td-r">B:</td>
              <td className="td-l td-r"></td>
              <td colSpan={2}>交货数量:</td>
              <td>{selectedRow.orderNum} pcs</td>
            </tr>
            <tr>
              <td className="td-r">阻焊:</td>
              <td className="td-r td-l">张</td>
              <td className="td-r td-l">字符:</td>
              <td className="td-r td-l">张</td>
              <td className="td-r td-l">光绘日期:</td>
              <td colSpan="2" className="td-r td-l"></td>
              <td className="td-r td-l">下料人:</td>
              <td colSpan="1" className="td-r td-l"></td>
              <td colSpan="2">单位:</td>
              <td colSpan="3"></td>
            </tr>
            <tr>
              <td className="td-r" colSpan="2">开料数量:</td>
              <td className="td-r td-l">A:</td>
              <td colSpan="2" className="td-r td-l"></td>
              <td className="td-r td-l">B:</td>
              <td colSpan="2" className="td-r td-l"></td>
              <td colSpan="1" className="td-r">共</td>
              <td colSpan="1" className="td-l td-r" style={{textAlign: 'right', paddingRight: '10px'}}>批</td>
              <td colSpan="1" className="td-r td-l">第</td>
              <td colSpan="1" className="td-l" style={{textAlign: 'right', paddingRight: '10px'}}>批</td>
              <td colSpan="1" className="td-r">本卡数:</td>
              <td colSpan="1" className="td-l"></td>
            </tr>
            <tr>
              <td rowSpan="2">序号</td>
              <td rowSpan="2">工序</td>
              <td rowSpan="2" colSpan="6">工艺要求</td>
              <td rowSpan="2" style={{width: '60px'}}>数量</td>
              <td rowSpan="2" style={{width: '60px'}}>完成时间</td>
              <td rowSpan="2" style={{width: '60px'}}>操作人</td>
              <td rowSpan="2" style={{width: '60px'}}>报废数</td>
              <td colSpan="2" style={{width: '120px'}}>QC</td>
            </tr>
            <tr>
              <td style={{width: '60px'}}>检验人</td>
              <td style={{width: '60px'}}>备注</td>
            </tr>
            <tr style={{display: getProcessExist(6) ? '' : 'none'}}>
              <td rowSpan={2 + pnlSetNum.length}></td>
              <td rowSpan={2 + pnlSetNum.length}>开料</td>
              <td colSpan="3" className="td-r td-l td-b">规格:{getMiValue(6, 2)}mm</td>
              <td colSpan="2" className="td-r td-l td-b">板厚:{getMiValue(6, 4)}mm</td>
              <td colSpan="1" className="td-r td-l td-b">烤板:{getMiValue(6, 6)}</td>
              <td rowSpan={2 + pnlSetNum.length}></td>
              <td rowSpan={2 + pnlSetNum.length}></td>
              <td rowSpan={2 + pnlSetNum.length}></td>
              <td rowSpan={2 + pnlSetNum.length}></td>
              <td rowSpan={2 + pnlSetNum.length}></td>
              <td rowSpan={2 + pnlSetNum.length}></td>
            </tr>
            <tr style={{display: getProcessExist(6) ? '' : 'none'}}>
              <td className="td-r td-l td-t td-b" colSpan={3}>厂商:{getMiValue(6, 8)}</td>
              <td className="td-r td-l td-t td-b" colSpan={3}>铜厚:{getMiValue(6, 10)}oz</td>
              <td className="td-r td-l td-t"></td>
              <td className="td-r td-l td-t"></td>
            </tr>
            {
              pnlSetNum.map((item,index)=>{
                return <tr style={{display: getProcessExist(6) ? '' : 'none'}} key={index}>
                  <td className="td-r td-l td-t td-b" colSpan={1}>{`PNL ${upperCaseLetter[index]} :`}</td>
                  <td className="td-r td-l td-t td-b" colSpan={2}>SET数:{item}</td>
                  <td className="td-r td-l td-t td-b" colSpan={3}>开料尺寸:{pnlSize[index]}</td>
                  <td className="td-r td-l td-t td-b"></td>
                  <td className="td-r td-l td-t td-b"></td>
                </tr>
              })
            }
            <tr style={{display: getProcessExist(8) ? '' : 'none'}}>
              <td></td>
              <td>内层线路</td>
              <td colSpan="4" className="td-r td-l">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(8, 12) === '湿膜' ? "mi-checkbox-checked mi-checkbox" : "mi-checkbox"}></div>
                    湿膜
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(8, 12) === '干膜' ? "mi-checkbox-checked mi-checkbox" : "mi-checkbox"}></div>
                    干膜
                  </div>
                </div>
              </td>
              <td className="td-r td-l " colSpan={1}>线宽:{getMiValue(8, 14)}mm</td>
              <td className="td-r td-l " colSpan={1}>线距:{getMiValue(8, 16)}mm</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(10) ? '' : 'none'}}>
              <td></td>
              <td>内层蚀刻</td>
              <td colSpan="3" className="td-r td-l">
                原稿最小线宽：{getMiValue(10, 18)}mm
              </td>
              <td colSpan="3" className="td-r td-l">
                线距：{getMiValue(10, 20)}mm
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(12) ? '' : 'none'}}>
              <td></td>
              <td>内层检验</td>
              <td colSpan="6">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(12, 22) === '目检' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    目检
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(12, 22) === 'AOI' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    AOI
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(12, 22) === '电测' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    电测
                  </div>
                </div>
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(14) ? '' : 'none'}}>
              <td></td>
              <td>内层氧化</td>
              <td colSpan="6">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(14, 24) === '黑化' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    黑化
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(14, 24) === '棕化' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    棕化
                  </div>
                </div>
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(16) ? '' : 'none'}}>
              <td></td>
              <td>层压</td>
              <td colSpan="3" className="td-r td-l">
                层压完成厚度:{getMiValue(16, 26)}土{getMiValue(16, 140)}mm
              </td>
              <td colSpan="3" className="td-r td-l">
                铜厚：{getMiValue(16, 28)}oz
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(18) ? '' : 'none'}}>
              <td></td>
              <td>板电</td>
              <td colSpan="6" className="td-r td-l">
                钻孔前板电至:{getMiValue(18, 30)}oz
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(20) ? '' : 'none'}}>
              <td></td>
              <td>外层钻孔</td>
              <td colSpan="3" className="td-r td-l">
                最小孔径:{getMiValue(20, 32)}mm
              </td>
              <td colSpan="3" className="td-r td-l">
                钻带名：{getMiValue(20, 34)}
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(22) ? '' : 'none'}}>
              <td></td>
              <td>一次铣槽（孔）</td>
              <td colSpan="6" className="td-r td-l">
                文件名： {getMiValue(22, 36)}
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(24) ? '' : 'none'}}>
              <td></td>
              <td>沉铜板电</td>
              <td colSpan="6">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(24, 38) === '除胶漆' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    除胶漆
                  </div>
                </div>
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(26) ? '' : 'none'}}>
              <td rowSpan="2"></td>
              <td rowSpan="2">外层图形</td>
              <td colSpan="3" className="td-r td-l td-b">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(26, 40) === '湿膜' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    <div>湿膜</div>
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(26, 40) === '干膜' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    <div>干膜</div>
                  </div>
                </div>
              </td>
              <td colSpan="3" className="td-r td-l td-b">
                <div className={'checkbox-group'}>
                  周期
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(26, 42) === '年周' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    年周
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(26, 42) === '周年' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    周年
                  </div>
                </div>
              </td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
            </tr>
            <tr style={{display: getProcessExist(26) ? '' : 'none'}}>
              <td colSpan="4" className="td-r td-l td-t">
                生产稿最小线宽：{getMiValue(26, 44)}
              </td>
              <td colSpan="2" className="td-r td-l td-t">
                线距：{getMiValue(26, 46)}
              </td>
            </tr>
            <tr style={{display: getProcessExist(28) ? '' : 'none'}}>
              <td rowSpan="2"></td>
              <td rowSpan="2">图形电镀</td>
              <td colSpan="2" rowSpan="2">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(28, 48) === '镀铜' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    镀铜
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(28, 48) === '镀锡' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    镀锡
                  </div>
                </div>
              </td>
              <td colSpan="4" className="td-r td-b">
                电镀有效面积:{getMiValue(28, 50)}sq.dm
              </td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
            </tr>
            <tr style={{display: getProcessExist(28) ? '' : 'none'}}>
              <td colSpan="2" className="td-r td-t">
                孔铜：{getMiValue(28, 52)}um
              </td>
              <td colSpan="1" className="td-r td-t td-l">
                成品铜厚： {getMiValue(28, 54)}
              </td>
            </tr>
            <tr style={{display: getProcessExist(30) ? '' : 'none'}}>
              <td rowSpan="2"></td>
              <td rowSpan="2">退膜蚀检</td>
              <td colSpan="4" className="td-r td-b">
                原稿最小线宽：{getMiValue(30, 56)}mm
              </td>
              <td colSpan="2" className="td-r td-b td-l">
                线距:{getMiValue(30, 58)} mm
              </td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
            </tr>
            <tr style={{display: getProcessExist(30) ? '' : 'none'}}>
              <td colSpan="6" className="td-t">
                <div className="checkbox-wrap">
                  <div
                    className={getMiValue(30, 60) === '（蚀刻后，退锡前）除钯' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                  (蚀刻后，退锡前)除钯
                </div>
              </td>
            </tr>
            <tr style={{display: getProcessExist(32) ? '' : 'none'}}>
              <td></td>
              <td>外层蚀检</td>
              <td colSpan="6">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(32, 62) === '目检' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    目检
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(32, 62) === 'AOI' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    AOI
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(32, 62) === '电测' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    电测
                  </div>
                </div>
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(34) ? '' : 'none'}}>
              <td rowSpan="2"></td>
              <td rowSpan="2">丝印阻焊</td>
              <td colSpan="2" className="td-r td-b">
                颜色：{getMiValue(34, 64)}
              </td>
              <td colSpan="4" className="td-r td-b td-l">
                <div className={'checkbox-group'}>
                  过孔:
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(34, 66) === '塞油' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    塞油
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(34, 66) === '盖油' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    盖油
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(34, 66) === '开窗' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    开窗
                  </div>
                  <div style={{marginLeft: '10px'}}>其它：{getMiValue(34, 68)}</div>
                </div>
              </td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
            </tr>
            <tr style={{display: getProcessExist(34) ? '' : 'none'}}>
              <td colSpan="2" className="td-r td-t td-l">
                厂家：{getMiValue(34, 70)}
              </td>
              <td colSpan="4" className="td-r td-t td-l">
                <div className={'checkbox-group'}>
                  周期:
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(34, 72) === '年周' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    年周
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(34, 72) === '周年' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    周年
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(34, 72) === '年月' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    年月
                  </div>
                </div>
              </td>
            </tr>
            <tr style={{display: getProcessExist(36) ? '' : 'none'}}>
              <td rowSpan="2"></td>
              <td rowSpan="2">丝印字符</td>
              <td colSpan="2" className="td-r td-b td-l">
                颜色：{getMiValue(36, 74)}
              </td>
              <td colSpan="4" className="td-r td-b td-l">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(36, 76).indexOf('元件面')>-1 ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    元件面
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(36, 76).indexOf('焊接面')>-1 ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    焊接面
                  </div>
                </div>
              </td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
            </tr>
            <tr style={{display: getProcessExist(36) ? '' : 'none'}}>
              <td colSpan="2" className="td-r td-t td-l">
                厂家：{getMiValue(36, 78)}
              </td>
              <td colSpan="4" className="td-r td-t td-l">
                <div className={'checkbox-group'}>
                  周期:
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(36, 80) === '年周' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    年周
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(36, 80) === '周年' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    周年
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(36, 80) === '年月' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    年月
                  </div>
                </div>
              </td>
            </tr>
            <tr style={{display: getProcessExist(38) ? '' : 'none'}}>
              <td></td>
              <td>喷锡</td>
              <td colSpan="6">
                {getMiValue(38, 82)}um
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(40) ? '' : 'none'}}>
              <td></td>
              <td>沉镍金</td>
              <td colSpan="3" className="td-r">
                镍厚：{getMiValue(40, 84)}mm
              </td>
              <td colSpan="3" className="td-r td-l">
                金厚：{getMiValue(40, 86)}u
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(42) ? '' : 'none'}}>
              <td></td>
              <td>碳油</td>
              <td colSpan="6">
                碳油印于：{getMiValue(42, 88)}
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(44) ? '' : 'none'}}>
              <td></td>
              <td>二次钻孔</td>
              <td colSpan="6" className="td-r td-l">
                文件名：{getMiValue(44, 90)}
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(46) ? '' : 'none'}}>
              <td rowSpan="2"></td>
              <td rowSpan="2">成形</td>
              <td colSpan="3" className="td-r td-l td-b">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(46, 92).indexOf('机锣') > -1 ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    机锣
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(46, 92).indexOf('冲模') > -1 ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    冲模
                  </div>
                </div>
              </td>
              <td colSpan="2" className="td-r td-l td-b">模具编号：{getMiValue(46, 94)}
              </td>
              <td colSpan="1" className="td-r td-l td-b">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(46, 96) === '斜边' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    斜边
                  </div>
                </div>
              </td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
            </tr>
            <tr style={{display: getProcessExist(46) ? '' : 'none'}}>
              <td colSpan="3" className="td-r td-l td-t">角度：{getMiValue(46, 98)}土{getMiValue(46, 142)}
              </td>
              <td colSpan="3" className="td-r td-l td-t">余厚：{getMiValue(46, 100)}土{getMiValue(46, 144)}
              </td>
            </tr>
            <tr style={{display: getProcessExist(48) ? '' : 'none'}}>
              <td rowSpan="2"></td>
              <td rowSpan="2">V-CUT</td>
              <td colSpan="6" className="td-r td-l td-b">
                <div className={'checkbox-group'}>
                  V-CUT方式：
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(48, 102).indexOf('电脑V-CUT' )>-1? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    电脑V-CUT
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(48, 102).indexOf('手工V-CUT')>-1 ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    手工V-CUT
                  </div>
                </div>
              </td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
            </tr>
            <tr style={{display: getProcessExist(48) ? '' : 'none'}}>
              <td colSpan="3" className="td-r td-l td-t">角度：{getMiValue(48, 104)}土{getMiValue(48, 146)}
              </td>
              <td colSpan="3" className="td-r td-l td-t">余厚：{getMiValue(48, 106)}土{getMiValue(48, 148)}
              </td>
            </tr>
            <tr style={{display: getProcessExist(50) ? '' : 'none'}}>
              <td rowSpan="2"></td>
              <td rowSpan="2">测试</td>
              <td colSpan="6" className="td-b">
                <div className={'checkbox-group'}>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(50, 108) === '飞针' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    飞针
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(50, 110) === '专用' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    专用
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(50, 112) === '通用' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    通用
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(50, 114) === '盖ET章' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    盖ET章
                  </div>
                </div>
              </td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
              <td rowSpan="2"></td>
            </tr>
            <tr style={{display: getProcessExist(50) ? '' : 'none'}}>
              <td colSpan="3" className="td-r td-l td-t">
                色笔划边:{getMiValue(50, 116)}
              </td>
              <td colSpan="3" className="td-r td-l td-t">
                治具编号：{getMiValue(50, 118)}
              </td>
            </tr>
            <tr style={{display: getProcessExist(52) ? '' : 'none'}}>
              <td></td>
              <td>FQC</td>
              <td colSpan="6">

              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(54) ? '' : 'none'}}>
              <td></td>
              <td>蓝胶</td>
              <td colSpan="3" className="td-r td-l">
                型号：{getMiValue(54, 120)}
              </td>
              <td colSpan="3" className="td-r td-l">
                蓝胶印于：{getMiValue(54, 122)}
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(56) ? '' : 'none'}}>
              <td></td>
              <td>FQA</td>
              <td colSpan="6" className="td-r td-l">
                成品板厚：{getMiValue(56, 124)}土 {getMiValue(56, 150)}mm
              </td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            <tr style={{display: getProcessExist(58) ? '' : 'none'}}>
              <td rowSpan="3"></td>
              <td rowSpan="3">包装出货</td>
              <td colSpan="6" className="td-r td-l td-b">
                <div className={'checkbox-group'}>
                  包装:
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(58, 126) === '真空' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    真空
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(58, 126) === '普通' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    普通
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(58, 126) === '其他' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    其它：
                  </div>
                  {getMiValue(58, 128)}
                </div>
              </td>
              <td rowSpan="3"></td>
              <td rowSpan="3"></td>
              <td rowSpan="3"></td>
              <td rowSpan="3"></td>
              <td rowSpan="3"></td>
              <td rowSpan="3"></td>
            </tr>
            <tr style={{display: getProcessExist(58) ? '' : 'none'}}>
              <td colSpan="3" className="td-r td-l td-b td-t">
                <div className={'checkbox-group'}>
                  出货:
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(58, 130) === '单片' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    单片
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(58, 130) === '联片' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    联片
                  </div>
                </div>
              </td>
              <td colSpan="3" className="td-r td-l td-b td-t">允许每SER报废PCS数:{getMiValue(58, 132)}</td>
            </tr>
            <tr style={{display: getProcessExist(58) ? '' : 'none'}}>
              <td colSpan="6" className="td-r td-l td-t">
                <div className={'checkbox-group'}>
                  出货要求:
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(58, 134) === '出货报告' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    出货报告
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(58, 136) === '切片' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    切片
                  </div>
                  <div className="checkbox-wrap">
                    <div
                      className={getMiValue(58, 138) === '可焊性' ? "mi-checkbox mi-checkbox-checked" : "mi-checkbox"}></div>
                    可焊性
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td></td>
              <td>备注</td>
              <td colSpan="12">

              </td>
            </tr>
            <tr>
              <td colSpan="3" style={{paddingTop: '10px'}} className="td-b td-l td-r">订单编号：{selectedRow.orderCode}</td>
              <td colSpan="3" style={{paddingTop: '10px'}} className="td-b td-l td-r">物料号：{selectedRow.custMatNo}</td>
              <td colSpan="4" style={{paddingTop: '10px'}} className="td-b td-l td-r"></td>
              <td colSpan="6" style={{paddingTop: '10px'}}
                  className="td-b td-l td-r">打印时间：{moment().format('YYYY-MM-DD HH:mm:ss')}</td>
            </tr>
          </table>
        </div>
      </Modal>
    </PageContainer>
  );
};

export default TableList;
